<template>
  <div>
    <Spin :spinning="loading" tip="Loading...">
      <div ref="chart" class="chartWrap" style="{ marginTop: '4px', padding: '10px' }" />
    </Spin>
  </div>
</template>

<script>
import echarts from 'echarts';
import config from '@/config';
// eharts  配置
const chartConf = config.charts;

export default {
  name: 'orderBEchart',
  data() {
    // echart 实例
    this.myChart = null;
    return {
      loading: false,
      option: this.createOption()
    };
  },
  methods: {
    initial() {
      this.loading = true;
      this.draw(this.option);
      this.loading = false;
    },
    draw(option) {
      this.myChart = echarts.init(this.$refs.chart);
      if (option && this.myChart) {
        this.myChart.clear();
        this.myChart.setOption(option);
      }
    },
    resize() {
      this.myChart = echarts.init(this.$refs.chart);
      this.myChart.resize();
    },
    createOption() {
      let options = {};
      options.title = { text: '睿蓝汽车4月份B端结算订单趋势' };
      options.tooltip = {
        trigger: 'axis'
      };
      options.legend = {
        data: ['全国', '东区', '南区', '西区', '北区', '曹操', '平台', '直销']
      };
      options.grid = {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      };
      options.toolbox = {
        feature: {
          saveAsImage: {}
        }
      };
      options.yAxis = {
        type: 'value'
      };
      options.xAxis = {
        type: 'category',
        boundaryGap: false,
        data: this.mockDate()
      };
      options.series = [
        {
          name: '全国',
          type: 'line',
          stack: 'Total',
          data: [0, 32, 0, 0, 0, 29, 1, 0, 0, 0, 1, 0, 101, -21, 10, 0, 0, 30, 0, 0, 22, 32, 0, 0, 43, 45, 44]
        },
        {
          name: '东区',
          type: 'line',
          stack: 'Total',
          data: [0, 32, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 0, 0, 0, 0, 0, -38, 38, 0, 0, 12, 7, 16]
        },
        {
          name: '南区',
          type: 'line',
          stack: 'Total',
          data: [0, 0, 0, 0, 0, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 0, 0, 0, 15, 0, 0]
        },
        {
          name: '西区',
          type: 'line',
          stack: 'Total',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -29, 0, 0, 0, 30, 0, 0, 0, 0, 0, 0, 0, 0, 8]
        },
        {
          name: '北区',
          type: 'line',
          stack: 'Total',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 8, 0]
        },
        {
          name: '曹操',
          type: 'line',
          stack: 'Total',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: '平台',
          type: 'line',
          stack: 'Total',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 100, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 20]
        },
        {
          name: '直销',
          type: 'line',
          stack: 'Total',
          data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, -6, 0, 0, 0, 0, 0]
        }
      ];
      return options;
    },
    mockDate() {
      let date = [];
      for (let i = 1; i < 31; i++) {
        date.push(i.toString());
      }
      return date;
    }
  },
  mounted() {
    this.initial();

    // 监听resize方法
    window.addEventListener('resize', this.resize, false);
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener('resize', this.resize, false);
    if (this.myChart) {
      this.myChart.dispose();
    }
    this.myChart = null;
  }
};
</script>

<style lang="less" scoped>
.chartWrap {
  width: 100%;
  min-height: 400px;
}
</style>
